<!--组件:导入气泡框-->
<template>
  <div id="bubble">
    <div class="bubblesquare">
      <strong class="import">导入教师名单</strong>
      <hr color="#F7F8FA" />
      <div class="import" @click="downloadFile">下载教师模板</div>
    </div>
  </div>
</template>

<script>
import { getdownloadFile} from "@/api/teacher";
export default {
  data() {
    return {
    }
  },
  methods: {
    //教师模板下载
    async downloadFile() {
      const data = await getdownloadFile();
      let fileName = "教师导入模板" + ".xlsx";
      let blob = new Blob([data], {
        type: "application/vnd.ms-excel",
      });
      // 浏览器兼容性能力检测
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        let requestUrl = URL.createObjectURL(blob);
        let downlondTag = document.createElement("a");
        document.body.appendChild(downlondTag);
        downlondTag.href = requestUrl;
        downlondTag.download = fileName;
        downlondTag.click();
        downlondTag.remove();
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
#bubble {
  .bubblesquare {
    position: relative;
    width: 130px;
    height: 75px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px #ccc;
    .input-file {
      display: none;
    }
    .import {
      color: #9c0000;
      margin-left: 15px;
      padding-top: 3px;
    }
  }
  .bubblesquare:after {
    position: absolute;
    display: inline-block;
    top: 67px;
    left: 60px;
    width: 0;
    height: 0px;
    content: "";
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(135deg);
    box-shadow: 2px -2px 2px #ccc;
  }
}
</style>